<template>
  <cjui-page-panel header="基础关系1">
    <template #intro> 保留了常见元素的样式效果。 </template>

    <div id="container"></div>
  </cjui-page-panel>
</template>

<script lang="ts" setup>
import { Graph } from '@antv/g6'

onMounted(() => {
  const graph = new Graph({
    container: document.getElementById('container'),
    data: {
      nodes: [
        {
          id: 'node-1',
          style: { x: 50, y: 100 },
        },
        {
          id: 'node-2',
          style: { x: 150, y: 100 },
        },
      ],
      edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2' }],
    },
  })

  graph.render()
})
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
}
</style>
